<template>
	<view class="content column" :style="{height:winH}">
		<view class="topBox">阿拉蕾公寓一期A栋601室<text class="label">预付费</text></view>
		<view class="listBox fill">
			<view class="mainBox">
				<view class="listTop row">
					<view class="li fill">充值时间</view>
					<view class="li small">充值金额(元)</view>
					<view class="li small">支付方式</view>
				</view>
				<view class="listBtm">
					<view class="list row">
						<view class="li fill">2023-04-07 17:45</view>
						<view class="li small">0.01</view>
						<view class="li small">微信</view>
					</view>
					<view class="list row">
						<view class="li fill">2023-04-07 17:45</view>
						<view class="li small">0.01</view>
						<view class="li small">微信</view>
					</view>
					<view class="list row">
						<view class="li fill">2023-04-07 17:45</view>
						<view class="li small">0.01</view>
						<view class="li small">微信</view>
					</view>
					<view class="list row">
						<view class="li fill">2023-04-07 17:45</view>
						<view class="li small">0.01</view>
						<view class="li small">微信</view>
					</view>
					<view class="list row">
						<view class="li fill">2023-04-07 17:45</view>
						<view class="li small">0.01</view>
						<view class="li small">微信</view>
					</view>
					<view class="list row">
						<view class="li fill">2023-04-07 17:45</view>
						<view class="li small">0.01</view>
						<view class="li small">微信</view>
					</view>
					<view class="list row">
						<view class="li fill">2023-04-07 17:45</view>
						<view class="li small">0.01</view>
						<view class="li small">微信</view>
					</view>
					<view class="list row">
						<view class="li fill">2023-04-07 17:45</view>
						<view class="li small">0.01</view>
						<view class="li small">微信</view>
					</view>
					<view class="list row">
						<view class="li fill">2023-04-07 17:45</view>
						<view class="li small">0.01</view>
						<view class="li small">微信</view>
					</view>
					<view class="list row">
						<view class="li fill">2023-04-07 17:45</view>
						<view class="li small">0.01</view>
						<view class="li small">微信</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				winH: '',
			}
		},
		onLoad() {
			this.winH = uni.getWindowInfo().windowHeight+"px";
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.content{
	padding-top: 16rpx;
	.topBox{
		background: #fff;
		padding: 20rpx 32rpx;
		line-height: 60rpx;
		font-size: 32rpx;
		font-weight: bold;
		.label{
			background: $uni-color-error;
			color: #fff;
			font-size: 28rpx;
			height: 42rpx;
			line-height: 42rpx;
			padding: 0 14rpx;
			margin-left: 30rpx;
			position: relative;
			&::before{
				content: '';
				display: inline-block;
				width: 0;
				height: 0;
				border: 10rpx solid transparent;
				border-left: none;
				border-right-color: $uni-color-error;
				position: absolute;
				top: 4rpx;
				left: -10rpx;
			}
		}
	}
	.listBox{
		padding: 30rpx 32rpx 50rpx;
		overflow-y: scroll;
		.mainBox{
			height: 100%;
			background: url('#{$imgUrl}/icon/bg_recharge_record.png') no-repeat;
			background-size: 100% 100%;
			padding: 94rpx 40rpx 0;
			position: relative;
			.listTop{
				border-bottom: 2rpx solid #dedede;
				position: absolute;
				top: 36rpx;
				left: 40rpx;
				width: calc(100% - 80rpx);
				.li{
					text-align: center;
					font-size: 24rpx;
					font-weight: bold;
					line-height: 58rpx;
					&.small{
						width: 180rpx;
					}
				}
			}
			.listBtm{
				height: calc(100% - 88rpx);
				overflow-y: scroll;
				.li{
					text-align: center;
					font-size: 24rpx;
					border-bottom: 2rpx solid #dedede;
					line-height: 68rpx;
					&.small{
						width: 180rpx;
					}
				}
			}
		}
	}
}
</style>
